<!-- eslint-disable max-len -->
<!-- eslint-disable prettier/prettier -->
<template>
  <div class="box">
    <div class="box-login-type">
      <span @click.once="toUrl('qq')">QQ</span>&nbsp;/&nbsp;<span
        @click.once="toUrl('github')"
        >GITHUB</span
      >&nbsp;/&nbsp;<span @mouseover="show = true" @mouseleave="show = false"
        >WECHAT</span
      >
    </div>
    <div class="footer">
      <a href="https://beian.miit.gov.cn" target="_blank">桂ICP备2020008058号</a>
    </div>
    <div class="scan-code" :class="{ 'show-block': show }">
      <qrcode-vue :value="'value'" />
    </div>
  </div>
</template>

<script setup lang="ts">
import QrcodeVue from "qrcode.vue";
import { ref } from "vue";

const show = ref(false);

const toUrl = (socialId: string) => {
  const redirectUrl = `${import.meta.env.VITE_AUTH_RE_URL}`;
  // eslint-disable-next-line max-len
  window.location.href = `${
    import.meta.env.VITE_API_URL
  }/auth/auth/social?clientId=messaging-client&socialId=${socialId}&redirectUrl=${redirectUrl}`;
};
</script>

<style lang="less" scoped>
.box-login-type {
  cursor: default;
  margin: 0 auto;
  width: 800px;
  text-align: center;
  margin-top: 200px;
}

.footer {
  position: fixed;
  bottom: 8px;
  font-size: 12px;
  color: #000;
  margin: 0 auto;
  a {
    color: #000;
  }
}
.show-block {
  display: block !important;
}
.scan-code {
  margin: 0 auto;
  width: 400px;
  text-align: center;
  display: none;
  margin-top: 30px;
}
</style>
